<template>
  
  <div class="content">
    <div class="gov-sub1">
      <div>
        <div class="gov-box">
          <div class="gov-title">
            <p>昨日用水分布图<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" auto-resize></chart>
        </div>
        <div class="gov-box">
          <div class="gov-title">
            <p>昨日大楼用水分布图<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart2" auto-resize></chart>
        </div>
      </div>
      <div>
        <div class="gov-box">
            <div class="gov-title">
              <p>一周大楼用水统计<i class="gl"></i><i class="gl"></i></p>
            </div>
          <chart :options="chart3" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'governmentC',
  data () {
    return {
      chartTheme: {},
      chart1: {
        color: ['#0024e4','#9d4fff','#4bf7ff','#acfbff','#2ba0ff','#0b4dff'],
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
         show: false
        },  
        series : [
          {
            name:'用水量',
            type:'pie',
            radius : '75%',
            center: ['50%', '50%'],
            data:[
              {value:735, name:'暖通空调'},
              {value:310, name:'照明用电'},
              {value:274, name:'动力用电'},
              {value:235, name:'特殊用电'}
            ].sort(function (a, b) { return a.value - b.value; }),
            label: {
              normal: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#fff'
                },
                length: 10,
                length2: 60
              }
            }
          }
        ]
      },
      chart2: {
        color: ['#0024e4','#9d4fff','#4bf7ff','#acfbff','#2ba0ff','#0b4dff'],
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
         show: false
        },  
        series : [
          {
            name:'用水量',
            type:'pie',
            radius : '75%',
            center: ['50%', '50%'],
            data:[
              {value:735, name:'暖通空调'},
              {value:310, name:'照明用电'},
              {value:274, name:'动力用电'},
              {value:235, name:'特殊用电'}
            ].sort(function (a, b) { return a.value - b.value; }),
            label: {
              normal: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#fff'
                },
                length: 10,
                length2: 60
              }
            }
          }
        ]
      },
      chart3: {
        color: ['#b8dff0','#7971ea','#3e4e88','#0024e4','#9d4fff','#4bf7ff','#acfbff','#2ba0ff','#0b4dff','#abfbff','#4ba0ff','#6b4dff','#acdbff','#2bc0ff','#0b4d7ff'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data:[]
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
          }
        ],
        series : [
          {
            name:'行政楼',
            type:'bar',
            data:[10, 52, 200, 334, 390, 330, 220],
          },
          {
            name:'附属楼',
            type:'bar',
            data:[20, 22, 152, 300, 390, 340, 240],
          },
          {
            name:'主楼',
            type:'bar',
            data:[30, 32, 187, 374, 390, 410, 230],
          },
          {
            name:'行政楼',
            type:'bar',
            data:[10, 52, 200, 334, 390, 330, 220],
          },
          {
            name:'附属楼',
            type:'bar',
            data:[20, 22, 152, 300, 390, 340, 240],
          },
          {
            name:'主楼',
            type:'bar',
            data:[30, 32, 187, 374, 390, 410, 230],
          },
          {
            name:'附属楼',
            type:'bar',
            data:[20, 22, 152, 300, 390, 340, 240],
          },
          {
            name:'主楼',
            type:'bar',
            data:[30, 32, 187, 374, 390, 410, 230],
          },
          {
            name:'附属楼',
            type:'bar',
            data:[20, 22, 152, 300, 390, 340, 240],
          },
          {
            name:'主楼',
            type:'bar',
            data:[30, 32, 187, 374, 390, 410, 230],
          },
          {
            name:'附属楼',
            type:'bar',
            data:[20, 22, 152, 300, 390, 340, 240],
          },
          {
            name:'主楼',
            type:'bar',
            data:[30, 32, 187, 374, 390, 410, 230],
          },
          {
            name:'主楼',
            type:'bar',
            data:[30, 32, 187, 374, 390, 410, 230],
          },
          {
            name:'主楼',
            type:'bar',
            data:[30, 32, 187, 374, 390, 410, 230],
          },
        ]
      }
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })
    this.getData()
  },
  methods: {
    getData: function () {
      this.$http('/vqdisplay/water/data')
      .then( response => {
        let _data = response.data.body
        console.log(_data)
        this.chart1.series[0].data = _data.wateritem_yesterday_pie.series
        this.chart2.series[0].data = _data.waterbuild_yesterday_pie.series  
        
        this.chart3.xAxis[0].data = _data.waterbuild_thisweek_bar.xAxis
        this.chart3.legend.data = _data.waterbuild_thisweek_bar.legend
        if (_data.waterbuild_thisweek_bar.legend.length>0) {
          _data.waterbuild_thisweek_bar.legend.forEach((item,index) => {
            this.chart3.series[index].name = item
            this.chart3.series[index].data = _data.waterbuild_thisweek_bar.series[index][item]
          });
        }
        
        
      })
    }
  }
}
</script>

<style scoped>
  @import '../../../style/government.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>